import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Menu, Button } from 'antd'

import logo from '../asset/images/icon.jpg'
import './index.css'
import menuList from '../config/menuConfig'

const { SubMenu } = Menu

class LeftNav extends React.Component {

    rendMenuList = (menuList) => {
        const selectKey = this.props.location.pathname
        return menuList.map(ele => {
            if (!ele.children) {
                return (
                    <Menu.Item key={ele.path} icon={ele.icon}>
                        <Link to={ele.path}>
                            {ele.name}
                        </Link>
                    </Menu.Item>
                )
            }
            if(ele.children.find( e => {
                return selectKey===e.path
            } )){
                this.openKey = ele.path
            }
            return (
                <SubMenu key={ele.path} icon={ele.icon} title={ele.name}>
                    {
                        this.rendMenuList(ele.children)
                    }
                </SubMenu>
            )
        })
    }

    render() {
        const menuNodes = this.rendMenuList(menuList)
        const selectKey = this.props.location.pathname
        const openKey = this.openKey
        return (
            <div>
                <Link to='/home'>
                    <div className='left-nav-header'>
                        <img src={logo}></img>
                        <h1>后台管理</h1>
                    </div>
                </Link>
                <Menu
                    defaultOpenKeys={[openKey]}
                    defaultSelectedKeys={[selectKey]}
                    mode="inline"
                    theme="dark"
                >
                    {
                        menuNodes
                    }
                </Menu>
            </div>
        )
    }
}

export default withRouter(LeftNav)